<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList Jquery</title>
    <script src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <div>
        <input id="input" type="text">
        <button id="btn">提交</button>
        <ul id="list"></ul>
    </div>
    <script>
        // MVP

        // V=视图
        // P=控制器
        function Page(){

        }
        $.extend(Page.prototype,{
            init:function(){
                this.bindEvents()
            },
            bindEvents:function(){
                var btn=$('#btn');
                btn.on('click',$.proxy(this.handleBtnclick,this))
            },
            handleBtnclick:function(){
                var inputElm=$("#input");
                var inputValue=inputElm.val();
                var ulElm=$("#list");
                ulElm.append('<li>'+inputValue+'</li>')
                inputElm.val('');
            }
        })
        var page=new Page();
        page.init();
    </script>
</body>
</html>